<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<title>Music Store 后台分类管理</title>
<link type="text/css" rel="Stylesheet" href="../style/admin.css" />
<link type="text/css" rel="Stylesheet" href="../jquery_ui/jquery-ui.css" />
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../jquery_ui/jquery-ui.js"></script>
<script>
$(function(){
	$("#dialog-form").dialog({
		autoOpen : false,
		show : {
			effect : "blind",
			duration : 1000
		},
		hide : {
			effect : "explode",
			duration : 1000
		},
		buttons : {
			"修改" : function() {
				
				$.getJSON("hom/updateClassifyById",{"id":$("#gid").val(),"name":$("#cname").val(),"description":$("#description").val()});
				$(this).dialog("close");
				show();
			},
			"取消" : function() {
				$(this).dialog("close");
			}
		}
	});
	$(".but").click(function(){
		$("#dialog-form").dialog("open");
		var id=$(this).attr("data");
		$.getJSON("sleectClassifyById",{"id":id},function(data){
			$("#cname").val(data.name);
			$("#gid").val(data.id);
			$("#description").val(data.description);
		});
	});
	
	$(".delete").click(function(){
		var id=$(this).attr("data");
		$.getJSON("deleteClassifyById",{"id":id});
		show();
	});
	
	$("#add").click(function(){
		$("#cname").val("");
		$("#gid").val("");
		$("#description").val("");
		$("#dialog-form").dialog("open");
	});
	
	
	$("#sum").click(function(){
		var name=$("#name").val();
		$.getJSON("sleectClassify",{"name":name},function(data){
			$("#show").empty();
			var html="";
               /*index-遍历次数*/
               $.each(data, function(index, c){
            	   html+="<tr>"+
					"<td>"+c.name+"</td>"+
					"<td><input class='but' type='button' style='margin: 0px auto;'"+
						"value='详情' data='${"+c.id+" }' /> <input class='delete' type='button'"+
						"style='margin: 0px auto;' value='删除' data='${"+c.id+" }' /></td>"+
				"</tr>;";
                  
               }); 
               $("#show").html(html);
		});
		
	})
})

	function show(){
		$.getJSON("getClassify",function(data){
			$("#show").empty();
			var html="";
           /*index-遍历次数*/
           $.each(data, function(index, c){
        	   
        	   html+="<tr>"+
					"<td>"+c.name+"</td>"+
					"<td><input class='but' type='button' style='margin: 0px auto;'"+
						"value='详情' data='${"+c.id+" }' /> <input class='delete' type='button'"+
						"style='margin: 0px auto;' value='删除' data='${"+c.id+" }' /></td>"+
				"</tr>;";
              
           });
           $("#show").html(html);
		});
	}

</script>
<style>
label, input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

fieldset {
	padding: 0;
	border: 0;
	margin-top: 25px;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 350px;
	margin: 20px 0;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td, div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: left;
}

.ui-dialog .ui-state-error {
	padding: .3em;
}

.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}
</style>

<div id="dialog-form" title="分类信息">
	<form>
		<input type="hidden" id="gid" name="gid" />
		<fieldset>
			<label for="name">分类名：</label> <input type="text" name="cname"
				id="cname" class="text ui-widget-content ui-corner-all"
				value="${param.name}" /> <label for="email">描述：</label>
		<textarea name="description" id="description"
			class="text ui-widget-content ui-corner-all">${param.description}
					</textarea>
		</fieldset>
	</form>
</div>

<div id="content-title">
	<h3>分类管理</h3>
</div>
<div id="content-main">
	<table border="0">
		<tr>
			<td>分类查询:</td>
			<td><input type="text" id="name" name="id" value="" /></td>
			<td><input type="submit" id="sum" name="sum" value="查询" /></td>
		</tr>
	</table>
	<a id="add" href="#">添加分类</a>
	<hr />
	<a href="album_edit">分类列表</a>
	<table id="album-list">
		<thead>
			<tr>
				<th>订单编号</th>
				<th>详细</th>
			</tr>
		</thead>
		<tbody id="show">
			<c:forEach var="i" items="${genres}">
			<tr>
				<td>${i.name}</td>
				<td><input class="but" type="button" style="margin: 0px auto;"
					value="详情" data="${i.id }" /> <input class="delete" type="button"
					style="margin: 0px auto;" value="删除" data="${i.id }" /></td>
			</tr>
		</c:forEach>
		</tbody>

	</table>
</div>

